<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-04-12 15:38:33
-->
<template>
  <div class="block x-y-center">
    <el-timeline v-if="!validatenull(list)">
      <template v-for="(v, k) in list">
        <el-timeline-item
          :key="k"
          :timestamp="v.recordTime"
          placement="top"
        >
          <div class="wrapper">
            <div class="header">
              <img
                :src="v.petAvatar"
                alt=""
                class="petAvatar"
              />
              <span>{{ v.petNickName }}</span>
            </div>
            <div class="type x-y-center">
              {{ v.type | transferType }}
            </div>
            <div class="content">{{ v.content }}</div>
            <template v-if="v.petType === 'image'">
              <div class="flex record">
                <img
                  v-for="(el, ind) in v.files"
                  :key="ind"
                  :src="el.url"
                  alt=""
                  class="record-img"
                />
              </div>
            </template>
            <template v-if="v.petType === 'video'">
              <video
                :src="v.files && v.files[0].url"
                controls="controls"
                width="130px"
                height="80px"
              >
                您的浏览器不支持 video 标签。
              </video>
            </template>
          </div>
        </el-timeline-item>
      </template>
    </el-timeline>
    <el-empty
      v-else
      :image-size="200"
    ></el-empty>
  </div>
</template>

<script>
import { BROADCAST_TYPE } from '@/const/type';
import { fetchTraceList } from '@/api/core/trace';
export default {
  name: '',
  filters: {
    transferType(val) {
      // 溯源类型（1：随手记，2：绝育，3：疫苗，4：驱虫，5：洗澡，6：体检，7：称体重）
      return ['随手记', '绝育', '疫苗', '驱虫', '洗澡', '体检', '称体重'][
        val - 1
      ];
    },
  },
  props: {
    id: {
      type: [Object, String],
    },
  },
  data() {
    return {
      BROADCAST_TYPE,
      list: [
        // {
        //   petNickName: '花花',
        //   petAvatar: 'https://via.placeholder.com/40',
        //   type: '1',
        //   content: '今天打疫苗了',
        //   fileUrl: 'https://via.placeholder.com/60',
        //   fileType: '1',
        //   recordTime: '2023-02-23',
        // },
        // {
        //   petNickName: '花花',
        //   petAvatar: 'https://via.placeholder.com/40',
        //   type: '2',
        //   content: '今天吃的很饱',
        //   fileUrl:
        //     'https://haokan.baidu.com/v?vid=12028160316290479906&pd=pcshare&hkRelaunch=p1%3Dpc%26p2%3Dvideoland%26p3%3Dshare_input',
        //   fileType: '2',
        //   recordTime: '2023-02-23',
        // },
      ],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getList();
        }
      },
    },
  },
  methods: {
    async getList() {
      const res = await fetchTraceList(this.id);
      this.list = res.data.data;
      this.list.forEach((el) => {
        el.files = JSON.parse(el.files);
        console.log('el.files', el.files);
        if (el.files) {
          el.files.forEach((item) => {
            var site = item.url && item.url.lastIndexOf('.');
            console.log('site', site);
            const fileType = item.url.substring(site + 1, item.url.length);
            console.log('fileType', fileType);
            const arr = ['mp4', 'mpeg', 'WMV', 'mov'];
            if (arr.includes(fileType)) {
              el.petType = 'video';
            } else {
              el.petType = 'image';
            }
          });
        }
      });
      console.log('list', this.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  margin-top: 40px;
  position: relative;
  width: 300px;
  height: auto;
  background: #f7f2ed;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(253, 163, 12, 1);
  border-radius: 15px;
  padding: 0 15px 20px;
  .header {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(-20px, -50%);
    .petAvatar {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      object-fit: cover;
      margin-right: 5px;
    }
  }
  .type {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    border: 1px solid rgba(253, 163, 12, 1);
    width: 50px;
    height: 50px;
    transform: translate(50%, -50%);
  }
  .content {
    margin-bottom: 10px;
  }
}
.record {
  flex-wrap: wrap;
  &-img {
    height: 80px;
    width: calc((100% - 30px) / 3);
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
